<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
   <%
		String path = request.getContextPath();
		String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
	%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%request.setCharacterEncoding("utf-8"); %>
<!doctype html>
<html>
	 <head>
		 <meta charset="UTF-8">
		 <meta name="Keywords" content="">
		 <meta name="Description" content="">
		 <title>SL会员管理系统登陆</title>
		  <link rel="shortcut icon" href="img/SL.ico" type="image/x-icon">
		 <style>
		 html,body {
	margin:0;
	overflow:hidden;
	width:100%;
	height:100%;
	cursor:defalut;
	background:black;
	background:linear-gradient(to bottom,#000000 0%,#5788fe 100%);
}
.filter {
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	background:#fe5757;
	animation:colorChange 30s ease-in-out infinite;
	animation-fill-mode:both;
	mix-blend-mode:overlay;
}
@keyframes colorChange {
	0%,100% {
	opacity:0;
}
50% {
	opacity:.9;
}
}.landscape {
	position:absolute;
	bottom:0px;
	left:0;
	width:100%;
	height:100%;
	/*background-image:url(https://openclipart.org/image/2400px/svg_to_png/250847/Trees-Landscape-Silhouette.png);
	*/
background-image:url('<%=basePath%>img/myimg/xkbg.png');
	background-size:1000px 250px;
	background-repeat:repeat-x;
	background-position:center bottom;
}
#canvas{
    position: fixed;
    z-index:0;
}
			*{margin:0;}
			<%-- body{background:url("<%=basePath%>img/beijing.jpg");background-size:cover;overflow:hidden;} --%>
			
			/*start login*/
			h1{line-height:80px;border-bottom:1px solid #bdb6b6;color:#242a3a;}
			.login{box-shadow:0 0 4px #000;width:370px;height:490px;background:#fff;margin:200px auto 0;border-radius:4px;text-align:center;}
			.login .l-center{width:87%;margin:auto;}
			.login .l-text{line-height:80px;margin:0 10px;padding-bottom:6px;color:#999999;font-weight:700;}
			.login .textColor{border-bottom:2px solid #29c062;color:#29c062;}
			.login .l-import{width:320px;height:50px;margin:10px auto;outline:none;border:1px solid #b0b0b0;border-radius:4px;text-indent:10px;}
			.login .b-sign{width:146px;height:50px;background:#33cc00;display:block;text-decoration:none;line-height:50px;color:#fff;border-radius:25px;font-weight:700;float:left;}
			.login .b-lost{float:right;line-height:80px;border-radius:30px;box-shadow:0 0 2px #000;}
			.login .l-center .c-hr hr{width:40%;display:inline-block;}
			.login .l-center .c-hr span{padding:10px 22px;line-height:60px;vertical-align:middle}
			.login .l-center .c-logbtn{outline:none;width:100%;height:50px;border-radius:25px;border:none;background:#3b5998;color:#fff;}
		 	/*end login*/
		 	#login:hover{
		 		cursor:pointer;
		 	}
		 </style>
		 <link style="text/css" rel="stylesheet" href="<%=basePath%>css/loading_v3.0.css"/>
		 <link style="text/css" rel="stylesheet" href="<%=basePath%>css/animate.css"/>
	 </head>
	 <body>
			 <div class="landscape"></div>
			<div class="filter"></div>
			<canvas id="canvas"></canvas>
	    		 	<!-- start login  -->
					<div class="login animated bounce" style="background-color: rgba(0,0,0,0.2);">
						<div class="l-center">
							<h1 style="color:white;">Welcome</h1>
							<span class="l-text textColor">SIGN IN</span>
					<!--		<span class="l-text">REGISTER</span>-->
							<p><input type="text" class="l-import animated bounceInLeft" id="name" name="name" placeholder="Your Name"></p>
							<p><input type="password" class="l-import animated bounceInRight" id="password" name="password" placeholder="Your Password" ></p>
							<div style="height:50px;margin-top:13px;">
								<input type="text" id="code" class="l-import animated bounceInLeft" style="width: 132px;margin-left: -47px;margin-top:-2px;" placeholder="Verification Code">
								<!-- <a href="javascript:void(0)" class="b-sign" onclick="vaildateCode()">SIGN IN</a> -->
								<img src="http://localhost/SLmbcs/YanZhenMa" width="140" height="50" class="b-lost" onclick="tm_change_Rand(this)">
							</div>
							<div class="c-hr">
								<hr><span>&nbsp;&nbsp;</span><hr>
							</div>
							<input type="button" onclick="vaildateCode()" id="login" value="Login" class="c-logbtn">
							
						</div>
					</div>
					<!-- end login -->
	   
		
		<!--jquery.min.js-->
		<script src="https://cdn.staticfile.org/jquery/2.1.4/jquery.min.js"></script>
		<script src="<%=basePath %>js/ios-parallax.js"></script>
		<script src="<%=basePath %>js/loading_v3.0.js"></script>
		<script src="<%=basePath %>js/plugins/layer/layer.js"></script>
		<script>
		
			function vaildateCode(){
				var code = $("#code").val();
				/* $.ajax({
					url:"val.jsp",
					data:{"code":code},
					success:function(message){
						$.tzLoading({content:message,width:120,height:45,timeout:1});
					}
				}); */
				if(code==''){
					layer.msg('验证码不能为空',{
						time:2500,
						anim:1
					});
				}else if($('#name').val()==''){
					layer.msg('用户名不能为空',{
						time:2500,
						anim:1
					});
				}else if($('#password').val()==''){
					layer.msg('密码不能为空',{
						time:2500,
						anim:1
					});
				}else {
					$.get('<%=basePath%>LoginServlet',{"code":code,"name":$('#name').val(),"password":$('#password').val()},function(message){
						if(message==1){
							layer.msg('验证码错误',{
								time:2500,
								anim:1
							});
						}else if(message==2){
							layer.msg('账户名或密码错误',{
								time:2500,
								anim:1
							});
						}else if(message==3){
							 window.location.href="http://localhost/SLmbcs"; 
						}else if(message==0){
							layer.msg('登陆失败',{
								time:2500,
								anim:1
							});
						}
					});
				}
			
				
				
			}
			
			//刷新验证码
			function tm_change_Rand(obj) {
				obj.src = "http://localhost/SLmbcs/YanZhenMa";
				location.reload();
			}
			
			
		</script>
		
		<script>
function Star(id, x, y){
	this.id = id;
	this.x = x;
	this.y = y;
	this.r = Math.floor(Math.random()*2)+1;
	var alpha = (Math.floor(Math.random()*10)+1)/10/2;
	this.color = "rgba(255,255,255,"+alpha+")";
}

Star.prototype.draw = function() {
	ctx.fillStyle = this.color;
	ctx.shadowBlur = this.r * 2;
	ctx.beginPath();
	ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false);
	ctx.closePath();
	ctx.fill();
}

Star.prototype.move = function() {
	this.y -= .15;
	if (this.y <= -10) this.y = HEIGHT + 10;
	this.draw();
}

Star.prototype.die = function() {
    stars[this.id] = null;
    delete stars[this.id];
}


function Dot(id, x, y, r) {
	this.id = id;
	this.x = x;
	this.y = y;
	this.r = Math.floor(Math.random()*5)+1;
	this.maxLinks = 2;
	this.speed = .5;
	this.a = .5;
	this.aReduction = .005;
	this.color = "rgba(255,255,255,"+this.a+")";
	this.linkColor = "rgba(255,255,255,"+this.a/4+")";

	this.dir = Math.floor(Math.random()*140)+200;
}

Dot.prototype.draw = function() {
	ctx.fillStyle = this.color;
	ctx.shadowBlur = this.r * 2;
	ctx.beginPath();
	ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false);
	ctx.closePath();
	ctx.fill();
}

Dot.prototype.link = function() {
	if (this.id == 0) return;
	var previousDot1 = getPreviousDot(this.id, 1);
	var previousDot2 = getPreviousDot(this.id, 2);
	var previousDot3 = getPreviousDot(this.id, 3);
	if (!previousDot1) return;
	ctx.strokeStyle = this.linkColor;
	ctx.moveTo(previousDot1.x, previousDot1.y);
	ctx.beginPath();
	ctx.lineTo(this.x, this.y);
	if (previousDot2 != false) ctx.lineTo(previousDot2.x, previousDot2.y);
	if (previousDot3 != false) ctx.lineTo(previousDot3.x, previousDot3.y);
	ctx.stroke();
	ctx.closePath();
}

function getPreviousDot(id, stepback) {
	if (id == 0 || id - stepback < 0) return false;
	if (typeof dots[id - stepback] != "undefined") return dots[id - stepback];
	else return false;//getPreviousDot(id - stepback);
}

Dot.prototype.move = function() {
	this.a -= this.aReduction;
	if (this.a <= 0) {
		this.die();
		return
	}
	this.color = "rgba(255,255,255,"+this.a+")";
	this.linkColor = "rgba(255,255,255,"+this.a/4+")";
	this.x = this.x + Math.cos(degToRad(this.dir))*this.speed,
	this.y = this.y + Math.sin(degToRad(this.dir))*this.speed;

	this.draw();
	this.link();
}

Dot.prototype.die = function() {
    dots[this.id] = null;
    delete dots[this.id];
}


var canvas  = document.getElementById('canvas'),
	ctx = canvas.getContext('2d'),
	WIDTH,
	HEIGHT,
	mouseMoving = false,
	mouseMoveChecker,
	mouseX,
	mouseY,
	stars = [],
	initStarsPopulation = 80,
	dots = [],
	dotsMinDist = 2,
	maxDistFromCursor = 50;

setCanvasSize();
init();

function setCanvasSize() {
	WIDTH = document.documentElement.clientWidth,
    HEIGHT = document.documentElement.clientHeight;                      

	canvas.setAttribute("width", WIDTH);
	canvas.setAttribute("height", HEIGHT);
}

function init() {
	ctx.strokeStyle = "white";
	ctx.shadowColor = "white";
	for (var i = 0; i < initStarsPopulation; i++) {
		stars[i] = new Star(i, Math.floor(Math.random()*WIDTH), Math.floor(Math.random()*HEIGHT));
		//stars[i].draw();
	}
	ctx.shadowBlur = 0;
	animate();
}

function animate() {
    ctx.clearRect(0, 0, WIDTH, HEIGHT);

    for (var i in stars) {
    	stars[i].move();
    }
    for (var i in dots) {
    	dots[i].move();
    }
    drawIfMouseMoving();
    requestAnimationFrame(animate);
}

window.onmousemove = function(e){
	mouseMoving = true;
	mouseX = e.clientX;
	mouseY = e.clientY;
	clearInterval(mouseMoveChecker);
	mouseMoveChecker = setTimeout(function() {
		mouseMoving = false;
	}, 100);
}


function drawIfMouseMoving(){
	if (!mouseMoving) return;

	if (dots.length == 0) {
		dots[0] = new Dot(0, mouseX, mouseY);
		dots[0].draw();
		return;
	}

	var previousDot = getPreviousDot(dots.length, 1);
	var prevX = previousDot.x; 
	var prevY = previousDot.y; 

	var diffX = Math.abs(prevX - mouseX);
	var diffY = Math.abs(prevY - mouseY);

	if (diffX < dotsMinDist || diffY < dotsMinDist) return;

	var xVariation = Math.random() > .5 ? -1 : 1;
	xVariation = xVariation*Math.floor(Math.random()*maxDistFromCursor)+1;
	var yVariation = Math.random() > .5 ? -1 : 1;
	yVariation = yVariation*Math.floor(Math.random()*maxDistFromCursor)+1;
	dots[dots.length] = new Dot(dots.length, mouseX+xVariation, mouseY+yVariation);
	dots[dots.length-1].draw();
	dots[dots.length-1].link();
}
//setInterval(drawIfMouseMoving, 17);

function degToRad(deg) {
	return deg * (Math.PI / 180);
}
</script>
	 </body>
</html>
